<template>
    <view class="main">
		
		<view class="bg1">
		</view>
		<view class="bg2">
		</view>
		
		<view class="box">
			<view class="contact">联系我们</view>
			<view class="line"></view>
			<view class="item">
				<image src="../../../static/images/contact-person.png" class="icon"></image>
				<view class="text">联系人:{{ configInfo['Contact_Person'].content }}</view>
			</view>
			<view class="item">
				<image src="../../../static/images/contact-phone.png" class="icon"></image>
				<view class="text">手机:{{ configInfo['Contact_Phone'].content }}</view>
			</view>
			<view class="item">
				<image src="../../../static/images/contact-email.png" class="icon"></image>
				<view class="text">邮箱:{{ configInfo['Contact_Email'].content }}</view>
			</view>
			<view class="item">
				<image src="../../../static/images/contact-address.png" class="icon"></image>
				<view class="text">地址:{{ configInfo['Company_Address'].content }}</view>
			</view>
			
			<view class="row-between">
				<view class="code">
					<image :src="configInfo['Service_QRCode'].content" class="code-img"></image>
					<view class="code-text">添加客服微信</view>
				</view>
				<view class="code">
					<image :src="configInfo['Wechart_QRCode'].content" class="code-img"></image>
					<view class="code-text">添加客服微信</view>
				</view>
			</view>
        </view>
    </view>
</template>

<script>
export default {
  name: 'Contact'
	,components:{
	}
  , data() {
    return {
      configInfo: {
      }
      , hasData: false
    }
  }

  , mounted() {
    this.getInfo()
  }

  , methods: {
    async getInfo() {
		let res = await this.$req({
			url: `/website/website/information/Wechat:guan409932398/query`,
			method:'get',
			data: { page: 1, limit: -1, sortField: 'create_time' }
		})
      if (res.code == 200) {
        res.data.forEach(item => {
          this.configInfo[item.code] = item
        })
        this.hasData = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    position: relative;
}
.bg1{
	width: 100%;
	height: 480rpx;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(@/static/images/contact-bg.png);
	background-size: 100% 100%;
}
.bg2{
	width: 100%;
	height: calc(100vh - 96rpx - 480rpx);
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(@/static/images/contact-bg2.png);
	background-size: 100% 100%;
}
.box{
	position: absolute;
	    transform: translate(-50%, -50%);
	    top: 50%;
	    left: 50%;
	width: calc(100% - 48rpx );
	height: calc(100% - 168rpx);
	background: linear-gradient(180deg, #F3F5F8 0%, #FAFBFC 100%);
	box-shadow: 12rpx 12rpx 80rpx 0px rgba(0,20,77,0.1);
	border-radius: 8rpx;
	border: 8rpx solid #FFFFFF;
	display: flex;
	flex-direction: column;
	padding-left: 48rpx;
	padding-right: 48rpx;
	
}

.contact{
	margin-top: 96rpx;
	font-size: 48rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 48rpx;
}
.line{
	margin-top: 24rpx;
	width: 192rpx;
	height: 4rpx;
	background: #004E96;
}
.item{
	margin-top: 64rpx;
	display: flex;
	.icon{
		width: 48rpx;
		height: 48rpx;
		
	}
	.text{
		margin-left:24rpx ;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
	}
}
.row-between{
		margin-top: 96rpx;
	display: flex;
	justify-content: space-between;
}
.code{

	width: 240rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.code-img{
	width: 240rpx;
	height: 240rpx;
	
}
.code-text{
	margin-top: 24rpx;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 44rpx;
}
</style>
